<div id="content_header">
  <h3>Student Unpaid Registration</h3>
</div>

<script type="text/ng-template" id="myModalDetailedStudent.html">
  <div class="modal-header">
    <h3 class="modal-title">{{ studentDetails.FullName }} Details</h3>
  </div>
  <div class="modal-body">
    <tabset justified="true">
      <tab heading="General">
        <div class="row">
          <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            <img src="http://placehold.it/320x320">
          </div>
          <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
            <dl>
              <dt>Fullname</dt>
              <dd>{{ studentDetails.FullName }}</dd>
              <dt>Nickname</dt>
              <dd>{{ studentDetails.NickName }}</dd>
              <dt>Student ID</dt>
              <dd>{{ studentDetails.SID }}</dd>
              <dt>Date of Birth</dt>
              <dd>{{ studentDetails.DoB }}</dd>
              <dt>Sex</dt>
              <dd>{{ studentDetails.sex.SexLabel }}</dd>
            </dl>
          </div>
        </div>
      </tab>
      <tab heading="Contacts">
        <div class="row">
          <div class="col-xs-6 col-md-6 col-lg-6" ng-repeat="contact in studentDetails.Contacts">
            <div class="panel panel-primary">
              <div class="panel-heading">
                <h4 class="panel-title">{{ contact.ContactType.ContactTypeLabel }}</h4>
              </div>
              <div class="panel-body">
                <dl>
                  <dt>Email</dt>
                  <dd>{{ contact.Email }}</dd>
                  <dt>Phone</dt>
                  <dd>{{ contact.Phone }}</dd>
                  <dt>Fax</dt>
                  <dd>{{ contact.Fax }}</dd>
                  <dt>Postal Code</dt>
                  <dd>{{ contact.PostalCode }}</dd>
                  <dt>Address</dt>
                  <dd>{{ contact.Address }}</dd>
                </dl>
              </div>
            </div>
          </div>
        </div>
      </tab>
      <tab heading="Courses">Courses content</tab>
      <tab heading="Payments">Payments content</tab>
    </tabset>
  </div>
</script>

<div class="row">
    <div class="col-xs-6">
      <label for="keyword">SEARCH</label>
      <div class="row">
        <div class="col-md-12">
          <form class="form-vertical" ng-submit="searchStudent()">
            <div class="input-group">
              <input class="form-control" type="text" name="keyword" id="keyword" placeholder="Type Name or Student ID and press enter to search" ng-model="searchText">
              <span class="input-group-btn">
                <button class="btn btn-default" type="button">Go!</button>
                </span>
            </div>
          </form>
        </div>
      </div>
    </div>
    <div class="col-xs-6">
      <label>RESULTS</label>
      <div class="row">
        <div class="search-message">
          Found <span class="primary-color"><b>{{ (students | filter:searchKey).length }}</b></span> matched records
        </div>
      </div>
    </div>
</div>
<div class="row">
  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <table class="table table-hover">
      <thead>
        <tr>
          <th>Personal Information</th>
          <th>SID</th>
          <th>Last Course Taken</th>
          <th>Last Placement Test</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="student in students | filter:searchKey">
          <td>
            <div class="media">
              <a class="pull-left" href="#">
                <div class="media-object" data-src="holder.js/64x64" alt="64x64" style="width: 48px; height: 48px; background-color: #95A5A6;"></div>
              </a>
              <div class="media-body">
                <dl>
                  <dt>Name</dt>
                  <dd ng-bind-html="student.FullName | makeBold:searchKey"></dd>
                  <dt>Date of Birth</dt>
                  <dd>{{ student.DoB | date:'dd MMMM yyyy' }}</dd>
                  <dd><a href="" ng-click="openDetailedModal(student.StudentID)">More Details</a></dd>
                </dl>
              </div>
            </div>
          </td>
          <td ng-bind-html="student.SID | makeBold:searchKey"></td>
          <td>GE - Pre Elementary 1 (PASSED)</td>
          <td>August, 02 2014 - Pre Elementary 1</td>
          <td>
            <div class="btn-group pull-right">
              <button type="button" class="btn btn-default dropdown-toggle btn-xs" data-toggle="dropdown">
                Action <span class="caret"></span>
              </button>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Add To Invoice</a></li>
                <li><a href="#">Edit</a></li>
                <li><a href="#">Cancel</a></li>
                <!-- <li><a ui-sref="^.show({id: student.StudentID})" >View Student</a></li> -->
              </ul>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<div class="" ng-show="searchKey">
  <!-- <a href="#/course" class="btn btn-primary">Register a New Student</a> -->
  <a ui-sref="^.new" class="btn btn-primary"><i class="simple-icon-user-follow"></i> Register a new Student</a>
</div>

<!-- <div class="row">
  <div class="search-message">
    Found <span class="primary-color"><b>{{ students.length | filter:searchText }}</b></span> matched records
  </div>
</div> -->

<!-- <div class="row">
  <table class="table table-stripped table-bordered" ng-show="students.length > 0">
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Gender</th>
        <th>Address</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="student in students | filter:searchText">
        <td>{{ student.FullName }}</td>
        <td>{{ student.NickName }}</td>
        <td>{{ sexes[student.SexID].SexLabel }}</td>
        <td>{{ student.PassportNumber }}</td>
        <td>
          <a class="" href="" ng-click="deleteStudent($index)"><i class="simple-icon-trash"></i></a>
          <a class="" ui-sref="^.show({id: $index})"><i class="simple-icon-magnifier"></i></a>
        </td>
      </tr>
    </tbody>
  </table>
</div> -->